<template lang="html">
  <div class="main-page" id="store-page">
    <!-- 标题 -->
    <nav-bar :title="title"  @goBack="onClickLeft"/>
    <!-- <van-nav-bar class="main-header" title="我的团队" :left-arrow="true" :fixed="true" :z-index="11" @click-left="onClickLeft"/> -->
    <!-- 主体内容 -->
    <div class="main-content has-header-space">
      <div class="super_details">
        <div class="top">
          <div class="user_info">
            <div class="user_info_img">
              <img class="img" :src="userinfo.user_avatar"/>
            </div>
            <div class="user_in">
              <div class="user_name">
                <div class="name">{{userinfo.user_nickname}}</div>
                <div class="lev">
                  <img class="img" :src="userinfo.icon"/>
                </div>
              </div>
              <div class="vip_tips">当前未开通超级会员</div>
            </div>
          </div>
          <div class="super_panel">
            <div class="super_title">超级会员享12大权益</div>
            <div class="super_list">
              <div class="super_scroll">
                <div class="super_item" v-for="(item, index) in superList" :key="index">
                  <div class="super_img">
                    <img :src="getImgUrl(item.no)" class="img"/>
                  </div>
                  <div class="super_txt">{{item.name}}</div>
                </div>
              </div>
              <div class="super_bg">
                <p>{{userCirtualData.name}}</p>
                <h3><span>￥</span>{{userCirtualData.price}}</h3>
              </div>
              <div class="super_tips">
                <img class="img" src="../../assets/image/member/payment_vip/gif_icon.png"/>
                <span>{{userCirtualData.describe_info}}</span>
              </div>
            </div>
          </div>
          <div class="super_bottom_tips">
            <ul>
              <li>超级会员权益服务一经开通不支持取消/退款，敬请谅解</li>
              <li>超级会员权益服务非实体商品，故无礼包商品返利</li>
            </ul>
          </div>
        </div>
        <div class="bottom">
          <div class="pact_read">开通即视为同意 <span @click="goToServe">美家美货超级会员服务协议</span></div>
          <div class="pay_btn fix_iphonex" @click="goBuy">立即支付{{userCirtualData.price}}元 </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/global/nav-bar.vue'
import Tool from '@/utils/tool'

export default {
  components: { NavBar },
  data () {
    return {
      title: '超级会员详情',
      userinfo: {},
      userCirtualData: {},
      superList: [
        {
          name: '购物省钱',
          img: '',
          no: 1
        },
        {
          name: '分享赚钱',
          img: '',
          no: 2
        },
        {
          name: '超值优惠券',
          img: '',
          no: 3
        },
        {
          name: '专属折扣',
          img: '',
          no: 4
        },
        {
          name: '无需囤货',
          img: '',
          no: 5
        },
        {
          name: '每月免邮券',
          img: '',
          no: 6
        },
        {
          name: '免费培训',
          img: '',
          no: 7
        },
        {
          name: '专属导师',
          img: '',
          no: 8
        },
        {
          name: '购物积分',
          img: '',
          no: 9
        },
        {
          name: '免费试用',
          img: '',
          no: 10
        },
        {
          name: '专享秒杀',
          img: '',
          no: 11
        },
        {
          name: '亲友邀请卡',
          img: '',
          no: 12
        }]
    }
  },
  created () {
    this.getUserInfo()
    this.userVirtual()
  },
  methods: {
    goBuy () {
      let sUserAgent = navigator.userAgent.toLowerCase()
      // if (sUserAgent.substr(sUserAgent.length - 5) !== '1.0.3') {
      //   this.$toast({ mask: false, message: '活动即将上线，尽情期待' })
      // }
      let ua = Tool.isSys()
      if (ua === 'android') {
        let edition = sUserAgent.split('/')[1].split('(')[0]
        if (!Tool.checkPlugin(edition, '1.0.5')) {
          this.$toast({ mask: false, message: '请更新至最新版本' })
          return
        }
      }
      if (ua === 'ios') {
        let edition = sUserAgent.substr(sUserAgent.length - 5)
        if (!Tool.checkPlugin(edition, '1.0.3')) {
          this.$toast({ mask: false, message: '请更新至最新版本' })
          return
        }
      }
      // if (sUserAgent.indexOf('1.0.3') === -1 && sUserAgent.indexOf('1.0.5') === -1) {
      //   this.$toast({ mask: false, message: '活动即将上线，敬请期待' })
      //   return
      // }
      this.$toast.loading({ mask: false, message: '加载中...' })
      let data = { item_id: this.userCirtualData.id }
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'user_virtual_records', data: data, method: 'post' }).then((resp) => { // 请求成功
          if (resp.return_code === '0000') {
            this.$toast.clear()
            this.$router.push('/merber/payment_vip_order?order_number=' + resp.data.out_trade_no + '&price=' + resp.data.total_fee * 100)
          } else {
            this.$toast(resp.return_msg)
          }
          resolve(resp)
        }).catch((error) => { // 请求失败
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    },
    userVirtual () {
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'user_virtual_items', params: { }, method: 'get' }).then((resp) => { // 请求成功
          if (resp.return_code === '0000') {
            this.userCirtualData = resp.data.list[0]
          }
          resolve(resp)
        }).catch((error) => { // 请求失败
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    },
    getUserInfo () {
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'profile', params: { }, method: 'get' }).then((resp) => { // 请求成功
          if (resp.return_code === '0000') {
            this.userinfo = resp.data.user_info
          }
          resolve(resp)
        }).catch((error) => { // 请求失败
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    },
    getImgUrl (row) {
      return require('@/assets/image/member/payment_vip/super_' + row + '.png')
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    goToServe () {
      this.$router.push('/personal/vip_server')
    }
  }
}
</script>

<style lang="css" scoped>
</style>
